<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }

        .cbox {
            border: 1px solid #999;
            padding: 20px 80px;
            margin: 10px 0px;
        }
    </style>
</head>

<body>
    <pre>
    vue组件构建时需要通过创建虚拟DOM，再由虚拟DOM构建页面真实容器;
        因此vue组件真实DOM容器构建时必须保证vue所有组件的组合虚拟DOM已完成定义(优先执行beforeMount之前包含beforeMount生命周期钩子函数);
        当真实DOM容器完成创建，需要渲染在页面上时，为减少页面的多次渲染操作，vue将挂载放置在JS环境下完成，最终统一由根组件完成一次页面渲染;
    </pre>
    <div id="app" class="cbox">
        <h4>组件A</h4>
        <comp-b></comp-b>
        <comp-c></comp-c>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        createApp({
            components: {
                CompB: {
                    template: `
                        <div class="cbox">
                            <h4>组件B</h4>
                            <comp-d></comp-d>
                            <comp-e></comp-e>
                        </div>
                    `,
                    components: {
                        CompD: {
                            template: `
                                <div class="cbox">
                                    <h4>组件D</h4>
                                </div>
                            `,
                            // beforeCreate () {
                            //     console.log("===> 组件D-beforeCreate");
                            // },
                            // created () {
                            //     console.log("===> 组件D-created");
                            // },
                            beforeMount () {
                                console.log("===> 组件D-beforeMount");
                            },
                            mounted () {
                                console.log("===> 组件D-mounted");
                            },
                        },
                        CompE: {
                            template: `
                                <div class="cbox">
                                    <h4>组件E</h4>
                                </div>
                            `,
                            // beforeCreate () {
                            //     console.log("===> 组件E-beforeCreate");
                            // },
                            // created () {
                            //     console.log("===> 组件E-created");
                            // },
                            beforeMount () {
                                console.log("===> 组件E-beforeMount");
                            },
                            mounted () {
                                console.log("===> 组件E-mounted");
                            },
                        },
                    },
                    // beforeCreate () {
                    //     console.log("==> 组件B-beforeCreate");
                    // },
                    // created () {
                    //     console.log("==> 组件B-created");
                    // },
                    beforeMount () {
                        console.log("==> 组件B-beforeMount");
                    },
                    mounted () {
                        console.log("==> 组件B-mounted");
                    },
                },
                CompC: {
                    template: `
                        <div class="cbox">
                            <h4>组件C</h4>
                        </div>
                    `,
                    // beforeCreate () {
                    //     console.log("==> 组件C-beforeCreate");
                    // },
                    // created () {
                    //     console.log("==> 组件C-created");
                    // },
                    beforeMount () {
                        console.log("==> 组件C-beforeMount");
                    },
                    mounted () {
                        console.log("==> 组件C-mounted");
                    },
                },
            },
            // beforeCreate () {
            //     console.log("=> 组件A-beforeCreate");
            // },
            // created () {
            //     console.log("=> 组件A-created");
            // },
            beforeMount () {
                console.log("=> 组件A-beforeMount");
            },
            mounted () {
                console.log("=> 组件A-mounted");
            },
        }).mount("#app")
    </script>
</body>

</html>